<div class="box-container">
  <div class="main-content">
    <div class="main-content-wrap">
      <div class="left-panel">
        <nz-tree
          #treeComponent
          [nzData]="treeData"
          [nzCheckedKeys]="checkedKeys"
          [nzExpandedKeys]="expandKeys"
          (nzCheckBoxChange)="treeSelectChanged()"
          nzCheckable
        >
        </nz-tree>
      </div>

      <div class="right-panel">
        <div class="right-top-box">
          <div class="right-content">
            <nz-card [nzTitle]="'按时间小计补水量'"
                     class="row-card">
              <div
                echarts
                [options]="chart1Opt"
                [merge]="chart1OptChange"
                style="height: 329px;"
              ></div>
            </nz-card>

            <nz-card [nzTitle]="'按对象小计补水量'"
                     class="row-card">
              <div
                echarts
                [options]="chart2Opt"
                [merge]="chart2OptChange"
                style="height: 329px;"
              ></div>
            </nz-card>
            <nz-card [nzTitle]="'统计值和特征值'"
                     class="row-card">
              <nz-table
                #editRowTable
                [nzData]="tableData"
                [nzFrontPagination]="false"
                nzBordered
                nzSize="middle"
              >
                <thead>
                <tr>
                  <th>日期</th>
                  <!-- <th>中卫一排</th>
                   <th>北河子</th>
                   <th>中卫九排</th>
                   <th>清水河</th>
                   <th>鸣沙州</th>
                   <th>南河子</th>
                   <th>南干沟</th>
                   <th>清水沟</th>
                   <th>金南干沟</th>
                   <th>东排水沟</th>
                   <th>苦水河</th>
                   <th>第一排水沟</th>
                   <th>第二排水沟</th>
                   <th>第三排水沟</th>
                   <th>第四排水沟</th>
                   <th>第五排水沟</th>-->
                  <th *ngFor="let head of tableHeaders">{{head}}</th>
                  <th>小计</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let data of editRowTable.data" class="editable-row">
                  <!-- <td>{{ data.a1 }}</td>
                   <td>{{ data.a2 }}</td>
                   <td>{{ data.a3 }}</td>
                   <td>{{ data.a4 }}</td>
                   <td>{{ data.a5 }}</td>
                   <td>{{ data.a6 }}</td>
                   <td>{{ data.a7 }}</td>
                   <td>{{ data.a8 }}</td>
                   <td>{{ data.a9 }}</td>
                   <td>{{ data.a10 }}</td>
                   <td>{{ data.a11 }}</td>
                   <td>{{ data.a12 }}</td>
                   <td>{{ data.a13 }}</td>
                   <td>{{ data.a14 }}</td>
                   <td>{{ data.a15 }}</td>
                   <td>{{ data.a16 }}</td>
                   <td>{{ data.a17 }}</td>-->
                  <td>{{ data.time }}</td>
                  <td *ngFor="let head of tableHeaders">
                    <span *ngIf="!data[head]"></span>
                    <span *ngIf="data[head]"> {{ data[head].toFixed(2)}}</span>
                  </td>
                  <td>{{ data.total.toFixed(2) }}</td>
                </tr>
                </tbody>
              </nz-table>
            </nz-card>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

